@import 'config';
.cartcontrol{
  $slot: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: px2rem(-$slot);
  .cart-add,.cart-decrease{
    padding: px2rem($slot);
    .icon{
      display: block;
      width: px2rem(20px);
      height: px2rem(20px); 
      font-size: px2rem(20px);
      line-height: px2rem(20px); 
      text-align: center;
      color: $primary;
      border-radius: 50%;
    }
  }
  .cart-decrease{
    transition: all .2s linear;
    .icon{
      line-height: px2rem(16px); 
      transition: all .4s linear;
      transform: rotate(0);
    }
    &.move-transition{
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
    &.move-enter, &.move-leave-active{
      opacity: 0;
      transform: translate3d(px2rem(8px), 0, 0);
      .icon{
        transform: rotate(180deg);
      }
    }
  }
  .cart-count{
    font-size: px2rem(14px);
    width: px2rem(20px);
    margin: 0 px2rem(-8px);
    text-align: center;
    color: $darker;
  }
}